$(function() {
    // 获取layui常使用的相关方法
    let layer = layui.layer
    let form = layui.form

    // 调用渲染文章类别下拉菜单函数
    getArticleCates()

    // 初始化富文本编辑器
    initEditor()


    // 发起请求渲染文章类别下拉菜单
    function getArticleCates() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg("获取文章分类失败！")
                }
                //    调用模版引擎渲染下拉菜单
                var htmlStr = template("cate-select", res)

                // 将内容渲染到页面中去
                $('[name="cate_id"]').html(htmlStr)

                // 因为是动态添加的下拉菜单，所以layui无法监听到这个情况，导致对于这个form的渲染失效了，解决办法就是重新渲染这个部分获取这个表单就可以了
                form.render()
            }
        })
    }


    // 裁剪区域的实现
    // 1.获初始化图片裁剪器
    let $image = $("#cropper-img")

    // 2.裁剪区域选项
    let cropperOption = {
        // 定义裁剪框的比例
        aspectRatio: 400 / 280,
        // 定义裁剪预览区要放在那个内容块中
        preview: '.imag-preview'
    }

    // 3.初始化裁剪区域
    $image.cropper(cropperOption)

    // 给选择封面按钮绑定点击事件
    $("#btnChooseCoverImage").on("click", function(e) {
            // 因为是表单内部的按钮，所以默认有提交属性，所以要阻止它的默认提交行为，下面的代码才能继续执行
            e.preventDefault()
                // 利用jq自动触发文件域的点击事件
            $("#fileCover").click()
        })
        // 监听文件域的change事件， 从而能够拿到用户所选择的文件是哪个
    $("#fileCover").on("change", function(e) {
        var files = e.target.files

        // 判断用户是否有选择文件，如果没选择则直接结束函数，有就继续执行
        if (files.length == 0) {
            return
        }
        // 拿到用户选择的第一个文件
        var file = files[0]
            // 获取到这个文件的对象地址
        var imageUrl = URL.createObjectURL(file)
            // 先把裁剪器中原先的内容销毁掉，然后再把这个地址给到裁剪器作为主图路径，最后再初始化裁剪器
        $image.cropper('destroy').attr('src', imageUrl).cropper(cropperOption)
    })


    // 定义文章发布的默认状态
    var status_pub = "已发布"
        // 当点击存为草稿的时候，改变文章的发布状态
        // 为存为草稿绑定点击事件
    $("#saveText").click(function(e) {
        // e.preventDefault()
        status_pub = "草稿";
    })


    // 为发布按钮绑定点击事件
    $("#form_pub").on("submit", function(e) {
            // 阻止默认提交行为
            e.preventDefault()
                // 利用FormData对象获取表单内的数据  切记FormData的小括号内只能放DOM元素，所以jQuery对象要转换为DOM对象
            let fd = new FormData($(this)[0]);
            // 将文章发布状态追加到FormData存储起来
            // 注意给FormData对象追加数据的时候，主要是以键值对的形式书写的
            fd.append('state', status_pub);
            // 获取到裁剪区的文件对象
            $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                    width: 400,
                    height: 280
                })
                .toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
                    // 得到文件对象后，进行后续的操作
                    fd.append('cover_img', blob)
                    publishArticle(fd)
                })

        })
        // 定义一个发布文章的函数
    function publishArticle(data) {
        $.ajax({
            method: 'POST',
            url: '/my/article/add',
            data: data,
            // 因为提交给服务器的数据是FormData格式的，所以一定要记得添加下面两个属性
            // 不改变数据的类型，保持不变FormData格式的  false为不改变
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg("发布文章失败！")
                }
                layer.msg("发布文章成功！")
                location.href = "art_list.html"
            }
        })
    }
})